<template>
  <view class="box">
    <uni-pop type="confirm"
      v-model="popData.isShow"
      :title="type==1?'服务项目':'提示内容'"
      :showClose="true"
      class="pop-box"
      @input="onCancel"
    >
      <template slot="content">
        <view v-if="type==1" class="cont-box">
          <view class="item" v-for="(item,index) in accompanySelect" :key="index">
            <view class="label">项目{{ index+1 }}：</view>
            <view class="value-text">
              {{item.name}}
            </view>
            <text class="iconfont icon-delete" @click.stop="deleteHandler(index)"></text>
          </view>
        </view>
        <view v-if="type==2" class="cont-box">
          <view class="item2" v-for="(item,index) in accompanySelect" :key="index">
            <view class="label">项目{{ index+1 }}：</view>
            <view class="flex">
              <view class="value-text">
                {{item.name}}
              </view>
              <view class="address">
                <image src="/static/ico_address@2x.png"></image>
                {{item.site||'暂无'}}
              </view>
            </view>
          </view>
        </view>
      </template>
      <template slot="commit">
        <view v-if="type==1" class="flex">
          <view class="btn-cancel btn-pop" @click="showSelectPicker2">
            新增项目
          </view>
          <view class="btn-link btn-pop ml2" @click="updateOrderAccompany">
            保存项目
          </view>
        </view>
      </template>
    </uni-pop>
    <select-picker ref="selectPicker2" :picker-list="accompanyList" range-key="name" @onConfirm="onConfirmSelect2" />
  </view>
</template>
<script>
import selectPicker from "@/components/select-picker.vue"
export default {
  components:{
    selectPicker
  },
  props: {
    orderId:{
      type: [Number],
      default:''
    },
  },
  data() {
    return {
      accompanySelect: [],
      accompanyList:[],
      item: {},
      type: 1,
      popData:{
        isShow:false
      }
    }
  },
  methods: {
    async listAccompany() {
      const params = {
        hospitalId: this.item.hospitalId
      }
      const {code,data} = await this.$apis.postApi('/hospital/listAccompanyName',params)
      if(code==200){
        this.accompanyList = data
      }
    },
    onConfirmSelect2(e) {

      if(!this.accompanySelect.some(item=>item.id==e.id)){
        this.accompanySelect.push(e)
      }



    },
    deleteHandler(index) {
      this.accompanySelect.splice(index,1)
    },
    onCancel() {

    },
    showPicker(item,type) {
      this.item = item
      this.type = type
      this.accompanySelect = item.orderAccompanyList.map(item => {
        return {
          id: item.accompanyId,
          name:item.accompanyName,
          site:item.accompanySite
        }
      })
      this.popData.isShow = true
      this.listAccompany()
    },
    // 选择项目
    showSelectPicker2() {
      console.log(this.accompanyList)
      this.$refs.selectPicker2.showPicker();
    },
    //保存
    updateOrderAccompany() {

      this.$api.msg(`保存入口`)

      const path = '/order/updateAccompany'

      this.$apis.postApi(path,{ orderId: this.orderId, accompanyNameList: this.accompanySelect}).then(({code,message}) => {
        if(code==200){
          this.$api.msg('提交成功');
          this.$emit('onConfirm',true)
          this.onCancel()
        } else {
          this.$api.msg(message);
        }
      }).catch(err=>{
        console.log(err)
      })



    },
    postUpdate(){

      const path = '/order/cancel'
      this.$apis.postApi(path,{orderId:this.orderId,status:16,operationReason:this.reason}).then(({code,message}) => {
        if(code==200){
          this.$api.msg('提交成功');
          this.$emit('onConfirm',true)
          this.onCancel()
        } else {
          this.$api.msg(message);
        }
      }).catch(err=>{
        console.log(err)
      })



    },
    commitConsult(){
      uni.showModal({
        title:'是否结束此订单',
        content: '维修材料费用跟师傅协商线下处理，后续保修维护直接由师傅来负责，平台仅收取上门服务费',
        success: (e)=>{
          if(e.confirm){
            this.$apis.postApi('/order/cancelOrderWithoutRefund',{orderId:this.orderId,operationReason:this.reason}).then(({code,message}) => {
              if(code==200){
                this.$api.msg('提交成功');
                this.$emit('onConfirm',true)
                this.onCancel()
              } else {
                this.$api.msg(message);
              }
            }).catch(err=>{
              console.log(err)
            })
          } else {
            this.onCancel()
          }
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.cont-box{
  text-align: left;
  .label{
    font-size: 28rpx;
    color: #555;
  }
  .value-text{
    font-size: 28rpx;
    color: #000;
    flex: 1;
  }
  .item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100rpx;
    border-bottom: 1px solid #ddd;
    .value-text{
      padding-left: 10rpx;
    }
  }
  .item2{
    border-bottom: 1px solid #ddd;
    padding: 24rpx 0;
    .label{
      margin-bottom: 18rpx;
    }
    .address{
      flex: 2;
      font-size: 28rpx;
      color: #000;
      image{
        width: 26rpx;
        height: 32rpx;
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
      }
    }
  }
}
.commit-box{
	display: flex;
	justify-content: center;
	.btn-pop{
		width: 168rpx;
		&.yes{
			background: #fe1940;
			color: #fff;
		}
	}
}
.icon-delete {
  font-size: 24rpx;
  color: darkred;
  margin-left: 10rpx;
}

</style>